<template>
    <div id="box">
        <div id="box-content">
            <div id="layer" v-show="isShow"><img src="static/icons/loading.gif" alt=""></div>
            <img class="pic2" src="static/icons/pic2.png" v-if="showPic" @click="picClick">
            <img class="pic2" src="static/icons/pic.png" v-else @click="picClick">
            <div id="nav">
                <Navbar>
                    <span @click="back" slot="left"><img src="static/icons/back.png" id="back"></span>
                    <span slot="center" class="nav-size">旅游</span>
                <img slot="right" src="static/icons/s1.png" class="img-size"  @click="search">
                </Navbar>
            </div>
            <div id="content">
                <TripMsg :value="searchCountry" :tripId="tripId" v-if="showPic"></TripMsg>
                <changePic :value="searchCountry" :tripId="tripId" v-else></changePic>
            </div>
        </div>
    </div>
</template>
<script>
import TripMsg from "../components/TripMsg.vue";
import Navbar from "../components/Navbar.vue";
import changePic from '../components/changePic'
import {mapState} from "vuex"
export default {
    data:function(){
        return{
            showPic:true,
            isShow:false
        }
    },
    components:{
        TripMsg,
        Navbar,
        changePic
    },
    computed:{
        ...mapState({
            searchCountry:state=>state.search.searchCountry,
            tripId:state=>state.search.tripId
        })
    },
    methods:{
        back(){
            history.back()
        },
        search(){
            this.$router.push({path:"/search"})
        },
        picClick(){
            this.showPic=!this.showPic;
        }
    },
    mounted:function(){
        var content = document.getElementById("box-content");
       window.onscroll=(e)=>{
        if(e.target.scrollTop>=e.target.scrollTopMax){
           console.log("加载")
            this.isShow=true; 
            this.$store.commit("setArrInd")
            setTimeout(function() {
                this.isShow=false;       
            }.bind(this), 700);
        }else{
            this.$store.commit("changeEmpty");
        }
       }
    }
}
</script>

<style lang='css' scoped>
#back{
        width: 30px;
        height: 30px;
        margin-top: 12px;
    }
    #box{
        position: relative;
    }
    #nav{
        background-color: #086fb9;
        color: white;
        position: fixed;
        top: 0;
        left: 0;
        
    }
    .img-size{
        width: 26px;
        height: 26px;
        /*border: 1px  solid red;*/
        margin-top: 12px;
    }
    #content{
        overflow-x: hidden;
        padding-top: 50px;
    }
    .pic2{
        height: 25px;
        width: 25px;
        position: fixed;
        top: 5px;
        right: 60px;
        z-index: 10;
        margin-top: 8px;

    }
     #layer{
        position: fixed;
        left: 50vw;
        bottom: 20px;
    }
</style>